<template>
    <div class="view">
        <nav-bar title="我的订单" :fixed="false">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="order-nav">
            <div class="order-nav-wrap">
                <ul>
                    <li :class="{acitve:status==='999' }" @click="selectStatus('999')">
                        <div class="text">全部</div>
                    </li>
                    <li :class="{acitve:status==='0'}" @click="selectStatus('0')">
                        <div class="text">待付款</div>
                    </li>
                    <li :class="{acitve:status==='1'}" @click="selectStatus('1')">
                        <div class="text">已付款</div>
                    </li>
                    <li :class="{acitve:status==='2'}" @click="selectStatus('2')">
                        <div class="text">待收货</div>
                    </li>
                    <li :class="{acitve:status==='3'}" @click="selectStatus('3')">
                        <div class="text">待评价</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="order-list-warp">
            <cube-scroll :data="orderList" ref="scroll" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
                <div class="no-order" v-if="isLoaded && orderList.length===0">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingdan1"></use>
                    </svg>
                    <div class="no-order-text">找不到相关订单</div>
                </div>
                <fillet-card class="order-item" v-for="(orderItem,index) in orderList" :key="index">
                    <div class="order-content" slot="content" @click="toOrderDetail(index)">
                        <div class="order-head">
                            <div class="order-time"><i class="iconfont icon-dianpu"></i> {{orderItem.supplier.supplier_name}}</div>
                            <div class="order-status" v-if="orderItem.receipt_status.value === 20">{{orderItem.receipt_status.text}}</div>
                            <div class="order-status" v-else-if="orderItem.delivery_status.value === 20">{{orderItem.delivery_status.text}}</div>
                            <div class="order-status" v-else>{{orderItem.pay_status.text}}</div>
                        </div>
                        <div class="order-body">
                            <div class="order-sub" v-for="item in orderItem.item" :key="orderItem.order_no+'-'+item.item_id+'-'+item.spec_sku_id">
                                <div class="picture">
                                    <img :src="item.image.file_path+'?imageView2/0/h/100'">
                                </div>
                                <div class="info">
                                    <div class="name ellipsis-2">{{item.name}}</div>
                                    <div class="sku ellipsis" v-if="item.item_attr!==''"> {{item.item_attr}}</div>
                                    <div class="number">
                                        <div class="amount">x{{item.total_num}}</div>
                                        <div class="price">{{item.total_price}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="order-statistics">
                            运费：¥{{orderItem.express_price}}
                        </div>
                        <div class="order-statistics">
                            <span>共计{{orderItem.item.length}}件商品</span>
                            <i>合计:¥{{orderItem.pay_price}}</i>
                        </div>
                        <div class="order-statistics">
                            <span>下单时间</span>
                            <i>{{orderItem.create_time | timeStamp}}</i>
                        </div>
                        <div class="order-footer" v-if="orderItem.pay_status.value===10 && orderItem.order_status.value === 10">
                            <div class="order-btn order-btn-importance" @click.stop="orderPay(index)">立即付款</div>
                            <div class="order-btn" @click.stop="orderCancel(index)">取消订单</div>
                        </div>
                        <div class="order-footer" v-if="orderItem.delivery_status.value===20 && orderItem.receipt_status.value === 10">
                            <div class="order-btn order-btn-importance" @click.stop="orderReceipt(index)">确认收货</div>
                            <div class="order-btn" @click.stop="toLogisticeDetail(orderItem.order_id)">查看物流</div>
                        </div>
                        <div class="order-footer" v-if="orderItem.order_status.value===30">
                            <div class="order-btn order-btn-importance" @click.stop="toOrderCommentPage(index)" v-if="!orderItem.is_comment">评价</div>
                            <div class="order-btn" @click.stop="toLogisticeDetail(orderItem.order_id)">查看物流</div>
                        </div>
                    </div>
                </fillet-card>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import DialogConfig from "@/constant/DialogConfig";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import NavBar from "@/components/aui/NavBar.vue";
    import FilletCard from "@/components/aui/FilletCard.vue";

    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar, FilletCard
        }
    })
    export default class OrderList extends Scene {
        private status: string = "999";
        private orderList: any = [];
        private isLoaded: boolean = false;
        private page: number = 1;
        private size: number = 10;

        private activated() {
            this.page = 1;
            this.isLoaded = false;
            this.$nextTick(() => {
                this.getOrderList();
            });
        }

        private get options(): any {
            let pullUpLoad: any | boolean = {
                threshold: 50,
                txt: {
                    more: "加载订单成功",
                    noMore: "没有更多订单惹！"
                }
            };
            if (this.isLoaded && this.orderList.length === 0) {
                (pullUpLoad as boolean) = false;
            }
            return {
                pullDownRefresh: {
                    threshold: 60,
                    stop: 40,
                    txt: "更新成功"
                },
                pullUpLoad
            };
        }


        @State("UserStore")
        public user!: InterfaceUser;

        private mounted(): void {
            this.status = (<any> this).$route.query.status || "999";
            // this.getOrderList();
            this.$nextTick(() => {
                this.getOrderList();
                // (<any> this).$refs.scroll.autoPullDownRefresh();
            });
        }

        private back(): void {
            this.navigateBack();
        }

        private onPullingDown(): void {
            this.page = 1;
            this.isLoaded = false;
            this.$nextTick(() => {
                setTimeout(() => {
                    this.getOrderList();
                }, 300);
            });
        }

        private onPullingUp(): void {
            setTimeout(() => {
                this.getOrderList();
            }, 500);
        }

        private selectStatus(status: string): void {
            (<any> this).$refs.scroll.resetPullUpTxt();
            this.page = 1;
            this.isLoaded = false;
            this.status = status;
            this.orderList.splice(0, this.orderList.length);
            (<any> this).$refs.scroll.scrollTo(0, 0, 0);
            // console.log((<any> this).$refs.scroll);
            this.$nextTick(() => {
                this.getOrderList();
            });
        }

        private toOrderDetail(i: number) {
            this.navigateTo({
                name: "orderDetail",
                query: {
                    orderId: this.orderList[i].order_id
                }
            });
        }

        private get dataType(): string {
            let dataType: string = "all";
            switch (this.status) {
                case "0":
                    dataType = "payment";
                    break;
                case "1":
                    dataType = "delivery";
                    break;
                case "2":
                    dataType = "received";
                    break;
                case "3":
                    dataType = "comment";
                    break;
                default:
                    dataType = "all";

            }
            return dataType;
        }

        private async getOrderList(): Promise<any> {

            const res = await Http.get(this.api.orderList, {dataType: this.dataType, page: this.page, size: this.size}, {token: this.user.token});
            if (res.code === 1) {
                if (this.page === 1) {
                    this.orderList.splice(0, this.orderList.length);
                }
                if (res.data.list.data.length > 0) {
                    this.orderList.push(...res.data.list.data);
                    this.page++;
                } else {
                    (<any> this).$refs.scroll.forceUpdate(false, true);
                }
                //    forceUpdate
            } else {
                this.globalSingleResultToast(res);
            }
            this.isLoaded = true;
        }

        private orderPay(i: number): void {
            this.navigateTo({
                name: "orderChannel",
                query: {
                    orderIds: this.orderList[i].order_id
                }
            });

        }

        private refreshOrderItem(i: number): void {
            if (this.dataType === "all") {
                Http.get(this.api.orderDetail, {order_id: this.orderList[i].order_id}, {token: this.user.token}).then((res) => {
                    if (res.code === 1) {
                        this.$set(this.orderList, i, res.data.order);
                    }
                })
            } else {
                this.orderList.splice(i, 1);
            }

        }

        private orderCancel(i: number): void {
            const dialogConfig = new DialogConfig();
            (<any> this).$createDialog({
                ...dialogConfig.getOrderCancelConfig(),
                onConfirm: () => {
                    const toast = (<any> this).$createToast({
                        time: 0,
                        txt: "正在取消订单"
                    }).show();
                    Http.post(this.api.orderCancel, {order_id: this.orderList[i].order_id}, {token: this.user.token}).then((res) => {
                        if (res.code === 1) {
                            // this.refreshOrderItem(i);
                            this.orderList.splice(i, 1);
                            toast.hide();
                        } else {
                            this.globalSingleResultToast(res);
                        }
                    }).catch(() => {
                        toast.hide();
                    });
                },
            }).show();
        }

        private orderReceipt(i: number): void {
            const dialogConfig = new DialogConfig();
            (<any> this).$createDialog({
                ...dialogConfig.getOrderReceiptConfig(),
                onConfirm: () => {
                    const toast = (<any> this).$createToast({
                        time: 0,
                        txt: "正在确认收货"
                    }).show();
                    Http.post(this.api.orderReceipt, {order_id: this.orderList[i].order_id}, {token: this.user.token}).then((res) => {
                        if (res.code === 1) {
                            this.refreshOrderItem(i);
                            toast.hide();
                        } else {
                            this.globalSingleResultToast(res);
                        }
                    }).catch(() => {
                        toast.hide();
                    });
                },
            }).show();
        }

        private toLogisticeDetail(id: string) {
            this.navigateTo({
                name: "logisticsDetail",
                query: {
                    orderId: id
                }
            });
        }

        private toOrderCommentPage(i: number) {
            this.navigateTo({
                name: "orderComment",
                query: {
                    orderId: this.orderList[i].order_id
                }
            });
        }

    }
</script>

<style scoped lang="stylus">
    .view
        height 100vh;
        background $theme-page-common-background-color;

    .order-nav
        height 40px;
        background #fff;

        .order-nav-wrap
            width 100%;

            ul
                display flex;
                box-pack center;
                justify-content center;
                background $theme-gray-lv9;
                font-size 14px;

                li
                    box-flex 1;
                    flex 1;
                    max-width 25%;
                    height 40px;
                    align-items stretch;
                    justify-content center;
                    display flex;

                    .text
                        line-height 40px

                    &.acitve
                        .text
                            box-sizing border-box;
                            border-bottom 2px solid $theme-common-color;
                            color $theme-common-color;

    .order-list-warp
        height calc(100vh - 40px - 44px - var(--safe-area-inset-top));

        .order-item
            margin-top 10px

            .order-head
                height 40px;
                display flex;
                padding 0 10px;
                justify-content space-between;
                align-items center;
                position relative;

                &:after
                    content '';
                    display block;
                    height 1px;
                    left 0;
                    right 0;
                    background $theme-gray-lv5;
                    position absolute;
                    bottom 0;

                .order-time
                    font-size 12px;
                    color $theme-auxiliary-color

                .order-status
                    font-size 13px;
                    color $theme-common-color;

            .order-body
                .order-sub
                    position relative;
                    display flex;
                    height 90px;
                    justify-content space-between;
                    padding 10px;

                    .picture, .picture img
                        width 60px;
                        height auto;
                        min-height 60px;

                    .info
                        width calc(100% - 70px);
                        display flex;
                        flex-direction column;
                        padding 2px 0;

                        .name
                            line-height 20px;
                            height 40px;
                            flex 0 0 40px;

                        .sku
                            font-size 11px;
                            color #999;
                            display flex;
                            line-height 12px;
                            flex 0 0 12px;

                        .number
                            display flex;
                            justify-content space-between;
                            font-size 12px;
                            margin-top 3px;
                            line-height 20px;

                            .amount
                                color #999;

                            .price
                                color #333;
                                font-size 17px;

                                &:before
                                    content '¥';
                                    font-size 12px;

            .order-statistics
                width 100%;
                height 32px;
                line-height 32px;
                position relative;
                padding 0 10px;
                text-align right;
                letter-spacing .4px;
                font-size 12px;

                span
                    color #999;
                    padding-right 10px;

                i
                    font-style normal;
                    color #333;

            .order-footer
                border-top 1px solid $theme-gray-lv6;
                height 46px;
                display flex;
                flex-direction row-reverse;
                align-items center;
                padding 0 10px;

                .order-btn
                    letter-spacing .4px;
                    display inline-block
                    height 26px;
                    color #666;
                    padding 0 15px;
                    font-size 12px;
                    line-height 24px;
                    border-radius 26px;
                    border 1px solid #999;
                    margin-left 10px

                .order-btn-importance
                    color $theme-common-color;
                    border 1px solid $theme-common-color;

    .no-order
        display flex;
        flex-direction column;
        justify-content center;
        align-items center;
        margin-top 40px;

        .icon
            width 30vw;
            height 30vw;

        .no-order-text
            line-height 60px;
            color $theme-common-color;
            font-size 16px;

</style>
